<template>
  <div class="about">
    <div class="displaytop">
         
    </div>
    <div class="aboutTab">
        <div :class="{'TabItem':true,'tabActive':index==tabIndex}" v-for="(item,index) in 4" :key="index" @click="chanceIndex(index)"> 
            <img src="../assets//222.jpg" alt="">
        </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
let tabIndex=ref(0);
let chanceIndex=(params)=>{
    tabIndex.value=params
   console.log(params)
}
  
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
.aboutTab{
  display: flex;
  height: 200px;
  
}
.TabItem{
  width: 15%;
  transition: width 0.5s ease;
  img{
    width: 100%;
    height: 100%;
  }
}
.tabActive{
  width: 55% !important;
}

</style>
